<template>
  <d2-container type="card">
    <template slot="header">导出表格</template>
    <div class="d2-mb">
      <el-button type="primary" @click="exportCsv">
        <d2-icon name="download" />
        导出 CSV
      </el-button>
      <el-button type="primary" @click="exportExcel">
        <d2-icon name="download" />
        导出 Excel
      </el-button>

      <el-button type="primary" @click="end_1(1)">
        <d2-icon name="download" />
        批量添加测试用户
      </el-button>

      <el-button type="primary" @click="end_1(2)">
        <d2-icon name="download" />
        获取测试用户
      </el-button>
    </div>

    <el-table v-bind="table" style="width: 100%">
      <el-table-column
        v-for="(item, index) in table.columns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      :hide-on-single-page="table.data.length > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40,100,1000]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 选择提交表单数据 -->
    <el-dialog
      :title="type == 1 ? ' 批量添加测试用户' : '获取测试用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="生成日期" :label-width="formLabelWidth">
          <el-input v-model.number="form.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="type == 1"
          label="开始编号"

          :label-width="formLabelWidth"
        >
          <el-input v-model="form.lastNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          v-if="type != 1"
          label="开始编号"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.startUserNumber"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="type != 1"
          label="结束编号"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.endUserNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          v-if="type == 1"
          label="生成数量"
          :label-width="formLabelWidth"
        >
          <el-input v-model.number="form.size" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button  :loading="button_loading" type="primary" @click="end()">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import { add_test_user, get_test_user } from "@/api/releasecourse/course";
import Vue from "vue";
import pluginExport from "@d2-projects/vue-table-export";
Vue.use(pluginExport);
export default {
  data() {
    return {
      button_loading: false,
      form: {
        date: "",
        size: "",
        lastNumber: "",
        startUserNumber: "",
        endUserNumber: ""
      },
      total: null,
      currentPage: 1,
      size: 10,

      type: null,
      dialogFormVisible: false,
      table: {
        columns: [
          { label: "ID", prop: "id" },
          { label: "用户名", prop: "username" },
          { label: "密码", prop: "password" }
        ],
        data: [],
        size: "mini",
        stripe: true,
        border: true
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.get_test_user({
        date: this.form.date,
        startUserNumber: this.form.startUserNumber,
        endUserNumber: this.form.endUserNumber,
        page: this.currentPage,
        pageSize: this.size
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.get_test_user({
        date: this.form.date,
        startUserNumber: this.form.startUserNumber,
        endUserNumber: this.form.endUserNumber,
        page: this.currentPage,
        pageSize: this.size
      });
    },
    end_1(e) {
      this.type = e;
      this.dialogFormVisible = true;
    },
    end() {
      this.button_loading= true
      if (this.type == 1) {
        this.add_test_user({
          date:parseInt(this.form.date) ,
          size:parseInt( this.form.size),
          lastNumber:parseInt( this.form.lastNumber) 
        });
      } else {
        this.get_test_user({
          date:parseInt(this.form.date),
          startUserNumber:this.form.startUserNumber,
          endUserNumber:this.form.endUserNumber ,
          page:parseInt(this.currentPage) ,
          pageSize:parseInt(this.size)  
        });
      }
    },

    //批量添加测试用户
    add_test_user(data) {
      add_test_user(data).then(res => {
        console.log(res);
        if (res.statusCode == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
        this.dialogFormVisible = false;
        this.button_loading= false
      }).catch(err => {
        console.log(err);
        this.dialogFormVisible = false;
        this.button_loading= false
      });
    },

    //获取随机用户列表
    get_test_user(data) {
      get_test_user(data).then(res => {
        console.log(res);
        if (res.statusCode == 200) {
          this.$message.success(res.message);
          this.total = res.data.total;
          this.table.data = res.data.list;
        } else {
          this.$message.error(res.message);
        }
        this.dialogFormVisible = false;
         this.button_loading= false
      }).catch(err => {
        console.log(err);
        this.dialogFormVisible = false;
        this.button_loading= false
      });
    },

    exportCsv(params = {}) {
      this.$export
        .csv({
          columns: [
            { label: " ", prop: "id" },
            { label: " ", prop: "username" },
            { label: " ", prop: "password" }
          ],
          data: this.table.data
        })
        .then(() => {
          this.$message("导出CSV成功");
        });
    },

    exportExcel() {
      this.$export
        .excel({
          columns: this.table.columns,
          data: this.table.data,
          header: "导出 Excel",
          merges: ["A1", "E1"]
        })
        .then(() => {
          this.$message("导出表格成功");
        });
    }
  }
};
</script>
